Completed
Push — master ( 631a65...02b665 )
by wiese
291:31 queued 226:28
created

main.js ➔ smoothScroll   B

Complexity

Conditions 1
Paths 8

Size

Total Lines 46

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 8
dl 0
loc 46
rs 8.9411
nop 0

1 Function

Rating   Name   Duplication   Size   Complexity  
C main.js ➔ ... ➔ $(ꞌa[href*="#"]ꞌ).click 0 39 7
1
(function ($) {
2
3
    var init = function () {
4
        smoothScroll();
5
6
        contactInfo();
7
8
        commentForm();
9
10
        formInfosManager();
11
12
        stateBarMenu();
13
14
        heightInfo();
15
16
        containersManager()
17
18
        openCommentItem();
19
20
21
        // replace select elements
22
        jcf.replaceAll();
0 ignored issues
show
Bug introduced by
The variable jcf seems to be never declared. If this is a global, consider adding a /** global: jcf */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
23
24
        selectedSelect();
25
26
        // TODO Move this into view handler
27
        $("#amount-typed").on("focus", function() {
28
           $(this).closest(".wrap-amount-typed").addClass("focused");
29
30
        });
31
        $("#amount-typed").on("focusout", function() {
32
            $(this).closest(".wrap-amount-typed").removeClass("focused");
33
        });
34
35
    };
36
37
    $(document).ready(function () {
38
        init();
39
    });
40
41
    $(window).resize(function () {
42
        containersManager();
43
    });
44
45
46
    var openCommentItem = function () {
47
        var $element = $('.supporter-item.wrap-field.commented');
48
        if ($element.length) {
49
            $($element).on("click", function () {
50
                $(this).toggleClass("selected");
51
                $(this).children(".info-text").toggleClass("opened");
52
            });
53
        }
54
    };
55
56
    var containersManager = function () {
57
        var $element = $('.switch-container');
58
        if ($element.length) {
59
            if ($(window).width() < 660) {
60
                $($element).addClass("container-fluid no-gutter");
61
                $($element).removeClass("container");
62
            } else {
63
                $($element).addClass("container");
64
                $($element).removeClass("container-fluid no-gutter");
65
            }
66
        }
67
    };
68
69
    // TODO Move into View Handler
70
    var selectedSelect = function () {
71
72
        if ($(window).width() < 1024) {
73
            $('select#title').children('option.hideme').prop('disabled',true);
74
            $('select#treatment').children('option.hideme').prop('disabled',true);
75
         }
76
        $("select").change(function () {
77
            $(this).closest("span.jcf-select").addClass("selected-item");
78
            $(this).next("span").addClass("selected-item");
79
        });
80
        $(".country-select").closest("span.jcf-select").addClass("selected-item");
81
        $(".country-select").next("span").addClass("selected-item");
82
    };
83
84
    var heightInfo = function () {
85
86
        $(".info-text").on("change", "input, select", function () {
87
            $(this).closest("fieldset").css("min-height", 0);
88
            var fieldsetHeight = $(this).closest("fieldset").height();
0 ignored issues
show
Unused Code introduced by
The variable fieldsetHeight seems to be never used. Consider removing it.
Loading history...
89
            var formHeight = $(this).closest(".info-text").prop('scrollHeight');
90
            $(this).closest("fieldset").css("min-height", formHeight + "px");
91
        });
92
    };
93
94
	// TODO Move into View Handler
95
    var formInfosManager = function () {
96
97
        var $element = $("section.donation-amount");
98
        if ($element.length) {
99
100
            $(".show-info input[type=radio]").on("click", function () {
101
102
                var id = this.id
103
                var fieldsetId = $(this).parents("fieldset").prop("id");
104
105
                $('fieldset#' + fieldsetId).css("min-height", 0);
106
107
                if (fieldsetId != 'type-membership') {
108
                    $('fieldset#' + fieldsetId + ' .wrap-field').removeClass("selected notselected");
109
                    $('fieldset#' + fieldsetId + ' .info-text').removeClass("opened");
110
                    $('[data-info="' + id + '"]').toggleClass("opened");
111
                    $(this).parents(".wrap-field").toggleClass("selected");
112
                    $(this).parents(".selected").prevAll('.wrap-field:first').toggleClass("notselected");
113
114
                    if ($('[data-info="' + id + '"]').hasClass("opened")) {
115
                        var formHeight = $('[data-info="' + id + '"]').prop('scrollHeight');
116
                        $(this).closest(".show-info").css("min-height", formHeight + "px");
117
                    }
118
                    ;
119
120
                }
121
            });
122
123
            if ($(window).width() < 1200) {
124
                $("#overview").on("click", ".wrap-field.completed .wrap-input,  .wrap-field.invalid .wrap-input", function (e) {
125
                    e.preventDefault();
126
                    $(this).closest(".wrap-field").toggleClass("opened");
127
                    $(this).toggleClass("opened");
128
                    $(this).next(".info-text-bottom").toggleClass("opened");
129
                });
130
            }
131
        }
132
    };
133
134
    var stateBarMenu = function () {
135
136
        var ACTIVE_THRESHOLD = 55;
137
138
        $.fn.isVisible = function (type) {
139
            // Current distance from the top of the page
140
            var windowScrollTopView = $(window).scrollTop();
141
            // Current distance from the top of the page, plus the height of the window
142
            var windowBottomView = windowScrollTopView + $(window).height();
143
            // Element distance from top
144
            var elemTop = $(this).offset().top;
145
            // Element distance from top, plus the height of the element
146
            if (type == "top") {
147
                offset = 50;
0 ignored issues
show
Bug introduced by
The variable offset seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.offset.
Loading history...
148
            } else if (type == "button") {
149
                offset = 15;
150
            } else {
151
                offset = +380;
152
            }
153
            var elemBottom = elemTop + $(this).height() + offset;
154
            //console.log("wTop " + windowScrollTopView + " wB " + windowBottomView  + " eTop" + elemTop);
155
            return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
156
        };
157
158
159
        if ($('.state-bar').length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
160
        var fixBarTop = $('.state-bar').offset().top;
161
        var donationSection = $("#donation-amount").offset().top;
162
        var donationPaymentSection = $("#donation-payment").offset().top;
163
        var donationTypeSection = $("#donation-type").offset().top;
164
165
        if ($(window).width() < 1023) {
166
            $(window).scroll(function () {
167
                var currentScroll = $(window).scrollTop();
168
                if (currentScroll + 70 >= fixBarTop) {
169
                    $('.state-bar').addClass('active');
170
                    $('.fixed-button').addClass('active');
171
                    $('.menu-main').addClass('under-bar');
172
173
                    if ($('.footer').isVisible('top')) {
174
                        $('.menu-main').removeClass('under-bar');
175
                    } else {
176
                        $(".state-bar").addClass('active');
177
                        $('.menu-main').addClass('under-bar');
178
                    }
179
180
                    if ($('#submit-bottom').isVisible('button')) {
181
                        $('.fixed-button').removeClass('active');
182
                    } else {
183
                        $('.fixed-button').addClass('active');
184
                    }
185
186
                } else {
187
                    $('.state-bar').removeClass('active');
188
                    $('.menu-main').removeClass('under-bar');
189
                }
190
                if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
191
                    $('.state-overview .amount').addClass('enabled');
192
                } else {
193
                    $('.state-overview .amount').removeClass('enabled');
194
                }
195
196
197
198
            });
199
        } else {
200
            $(window).scroll(function () {
201
                var currentScroll = $(window).scrollTop();
202
                if ($('body#donation').length) {
203
                    var initialTop = 200;
204
                } else if ($('body#membership').length) {
205
                    var initialTop = 650;
0 ignored issues
show
Comprehensibility Naming Best Practice introduced by
The variable initialTop already seems to be declared on line 203. Consider using another variable name or omitting the var keyword.

This check looks for variables that are declared in multiple lines. There may be several reasons for this.

In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs.

If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared.

Loading history...
206
                }
207
208
209
                if (currentScroll >= initialTop) {
0 ignored issues
show
Bug introduced by
The variable initialTop does not seem to be initialized in case $("body#membership").length on line 204 is false. Are you sure this can never be the case?
Loading history...
210
                    $('.state-overview .wrap-bar').addClass('fixed');
211
                    //console.log("wrap bar" + currentScroll);
212
                } else {
213
                    $('.state-overview .wrap-bar').removeClass('fixed');
214
                }
215
216
217
                if (($('.state-bar-lateral .wrap-bar').outerHeight() + $('.state-bar-lateral .wrap-bar').offset().top ) > ( $('.form-shadow-wrap').offset().top + $('.form-shadow-wrap').outerHeight() + 150)) {
218
                    $('.state-bar-lateral').removeClass('active');
219
                } else {
220
                    $('.state-bar-lateral').addClass('active');
221
                }
222
            });
223
        }
224
225
        // TODO Include this only on mebership pages
226
        if ($("body#membership").length) {
227
            var memberTypeSection = $("#membership-type").offset().top;
228
            $(window).scroll(function () {
229
                var currentScroll = $(window).scrollTop();
230
                var typeMemberElements = $('.state-overview .member-type');
231
                var donatorElements = $('.state-overview .donator-type');
232
                var amountElements = $('.state-overview .amount');
233
                var paymentElemnts = $('.state-overview .payment-method');
234
235
                typeMemberElements.removeClass('enabled');
236
                donatorElements.removeClass('enabled');
237
                amountElements.removeClass('enabled');
238
                paymentElemnts.removeClass('enabled');
239
                ACTIVE_THRESHOLD = 60;
240
                if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
241
                    paymentElemnts.addClass('enabled');
242
                }
243
                else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
244
                    amountElements.addClass('enabled');
245
                }
246
                else if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
247
                    donatorElements.addClass('enabled');
248
                }
249
                else if (currentScroll >= memberTypeSection - ACTIVE_THRESHOLD) {
250
                    typeMemberElements.addClass('enabled');
251
                }
252
            });
253
        } else {
254
            // TODO include only on donation pages?
255
            $(window).scroll(function () {
256
                var currentScroll = $(window).scrollTop();
257
                var amountElements = $('.state-overview .amount');
258
                var paymentElemnts = $('.state-overview .payment-method');
259
                var donatorElements = $('.state-overview .donator-type');
260
261
                amountElements.removeClass('enabled');
262
                paymentElemnts.removeClass('enabled');
263
                donatorElements.removeClass('enabled');
264
                if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
265
                    donatorElements.addClass('enabled');
266
                }
267
                else if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
268
                    paymentElemnts.addClass('enabled');
269
                }
270
                else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
271
                    amountElements.addClass('enabled');
272
                }
273
            });
274
        }
275
276
    };
277
278
    // TODO move into view handlers
279
    var submitValidation = function () {
280
        var isValid = true;
281
        $('form').find('input, textarea').each(function () {
282
            if ($(this).val() == "" || !this.checkValidity()) {
283
                $(this).addClass('invalid');
284
                $(this).parent().addClass('invalid');
285
                isValid = false;
286
            }
287
            else {
288
                $(this).removeClass('invalid');
289
                $(this).parent().removeClass('invalid');
290
                $(this).addClass('valid');
291
                $(this).parent().addClass('valid');
292
            }
293
        });
294
        return isValid;
295
    };
296
297
    var contactInfo = function () {
298
        var form = $('#contact-form');
299
        if (form.length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
300
        form.submit(submitValidation);
301
        form.find('input[type="submit"]').click(submitValidation);
302
303
        form.find('input, textarea').keypress(function () {
304
            $(this).data('data-entered', true);
305
        });
306
307
        form.find('input, textarea').blur(function () {
308
            if (!$(this).data('data-entered')) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
309
310
            if ($(this).val() == "" || !this.checkValidity()) {
311
                $(this).addClass('invalid');
312
                $(this).parent().addClass('invalid');
313
                isValid = false;
0 ignored issues
show
Bug introduced by
The variable isValid seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.isValid.
Loading history...
314
            }
315
            else {
316
                $(this).removeClass('invalid');
317
                $(this).parent().removeClass('invalid');
318
                $(this).addClass('valid');
319
                $(this).parent().addClass('valid');
320
            }
321
        });
322
    };
323
324
    var commentForm = function () {
325
        var form = $('#comment-form');
326
        if (form.length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
327
        form.submit(submitValidation);
328
        form.find('input[type="submit"]').click(submitValidation);
329
330
        form.find('input, textarea').keypress(function () {
331
            $(this).data('data-entered', true);
332
        });
333
334
        form.find('input, textarea').blur(function () {
335
            if (!$(this).data('data-entered')) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
336
337
            if ($(this).val() == "" || !this.checkValidity()) {
338
                $(this).addClass('invalid');
339
                $(this).parent().addClass('invalid');
340
                isValid = false;
0 ignored issues
show
Bug introduced by
The variable isValid seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.isValid.
Loading history...
341
            }
342
            else {
343
                $(this).removeClass('invalid');
344
                $(this).parent().removeClass('invalid');
345
                $(this).addClass('valid');
346
                $(this).parent().addClass('valid');
347
            }
348
        });
349
    };
350
351
    var smoothScroll = function () {
352
        $('a[href*="#"]')
353
            // Remove links that don't actually link to anything
354
            .not('[href="#"]')
355
            .not('[href="#0"]')
356
            .not('.state-overview .wrap-field.completed .wrap-input')
357
            .click(function (event) {
358
359
                if ((!$(this).closest(".wrap-field.completed .wrap-input").length) || ($(window).width() > 1200)) {
360
                    // On-page links
361
                    if (
362
                        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
363
                        &&
364
                        location.hostname == this.hostname
365
                    ) {
366
                        // Figure out element to scroll to
367
                        var target = $(this.hash);
368
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
369
                        console.log("link2");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
370
                        // Does a scroll target exist?
371
                        if (target.length) {
372
                            // Only prevent default if animation is actually gonna happen
373
                            console.log("link3");
374
                            event.preventDefault();
375
                            $('html, body').animate({
376
                                scrollTop: target.offset().top - 55
377
                            }, 1000, function () {
378
                                // Callback after animation
379
                                // Must change focus!
380
                                var $target = $(target);
381
                                $target.focus();
382
                                if ($target.is(":focus")) { // Checking if the target was focused
383
                                    return false;
384
                                } else {
385
                                    $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
386
                                    $target.focus(); // Set focus again
0 ignored issues
show
Best Practice introduced by
There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.
Loading history...
387
                                }
388
                            });
389
                        }
390
                    }
391
                } else {
392
                    event.preventDefault();
393
                    console.log("link no");
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
394
                }
395
            });
396
    };
397
398
})(jQuery);
399